<template>
    <div class="home-box">
        <el-carousel trigger="click" :height="(windowHeight - 60) + 'px'" indicator-position="none" class="carousel">
            <el-carousel-item>
                <img src="@/assets/images/banner0.png" alt="" class="img">
            </el-carousel-item>
            <!-- <el-carousel-item>
                <img src="@/assets/images/banner0.png" alt="" class="img">
            </el-carousel-item> -->
        </el-carousel>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 屏幕宽度
const windowWidth = ref(0)
// 屏幕高度
const windowHeight = ref(0)

// 生命周期
onMounted(() => {
    getWindowResize()
    window.addEventListener('resize', getWindowResize)
})
// 获取屏幕尺寸
const getWindowResize = function () {
    windowWidth.value = window.innerWidth
    windowHeight.value = window.innerHeight
}

</script>

<style lang="less" scoped>
.home-box {
    height: 100%;

    .img {
        width: 100%;
        height: auto;
        min-height: 650px;
    }

}
</style>
